<template>
  <div class="CarsExchangeApply">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>车辆管理</el-breadcrumb-item>
      <el-breadcrumb-item><span class="fs14 bold">车辆流转申请</span></el-breadcrumb-item>
    </el-breadcrumb>

    <div class="common-operate-box">
      <el-form class="form-wrap flexMultiWrap">
        <FormWithLabel label="车牌">
          <el-input v-model="tmpData.car" placeholder="车牌"></el-input>
        </FormWithLabel>
        <FormWithLabel label="原训练场">
          <FormInputWithDialog
            :val="inputDiolag.idList"
            v-bind="inputDiolag.innerSelect"
            @update:val="handleInp('id', $event)"
            @update:valText="handleInp('text', $event)"/>
        </FormWithLabel>
        <FormWithLabel label="新训练场">
          <FormInputWithDialog
            :val="newInputDiolag.idList"
            v-bind="newInputDiolag.innerSelect"
            @update:val="newHandleInp('id', $event)"
            @update:valText="newHandleInp('text', $event)"/>
        </FormWithLabel>
        <FormWithLabel label="审核状态">
          <el-select v-model="tmpData.status">
            <el-option label="全部" :value="undefined"></el-option>
            <el-option
              v-for="item in auditStatus" :key="item.value"
              :label="item.text" :value="item.value">
            </el-option>
          </el-select>
        </FormWithLabel>
      </el-form>
      <div class="btn-line flexCenter mt30">
        <button class="btn-operate btn-style-main mr10" @click="search">查询</button>
        <button class="btn-operate btn-style-tan" @click="resert">重置</button>
      </div>
    </div>

    <div class="common-operate-box">
      <div class="btn-line">
        <button v-auth-id="'CAM020020'" class="btn-operate btn-style-main mr10 mb10" @click="handleAdd">申请流转</button>
      </div>
      <el-table :max-height="this.tableMaxHeight()" :data="tableData" border>
        <el-table-column
          type="index" label="序号"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="text" label="状态"
          header-align="center" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.text==='审核不通过'" class="c-main">{{scope.row.text}}</span>
            <span v-else-if="scope.row.text==='审核通过'" class="c-btn-out">{{scope.row.text}}</span>
            <span v-else>{{scope.row.text}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="operate" label="操作"
          header-align="center" align="center">
          <template slot-scope="scope">
            <BtnTb v-auth-id="'CAM020020'" @click="handlePreview(scope.row.id)">查看</BtnTb>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator" label="申请人"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="createTime" label="申请时间"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="plateNumber" label="车牌号"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="oldSchool" label="原驾校"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="oldProject" label="原项目部"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="oldDrivingPlace" label="原训练场"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="newSchool" label="新驾校"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="newProject" label="新项目部"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="newDrivingPlace" label="新训练场"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="id" label="" v-if="hideRow"
          header-align="center" align="center">
        </el-table-column>
      </el-table>

      <el-pagination
        class="flexCenter mt30"
        background
        :current-page.sync="pageNum" :page-size.sync="pageSize" :total="totalPage"
        :page-sizes="[10, 30, 50, 100]" layout="prev, pager, next, sizes, jumper, total"
        @size-change="ajaxGetData" @current-change="ajaxGetData">
      </el-pagination>
    </div>

    <SelfDialog
      :isShow="isShowDialog" size="l" :titTxt="DialogShowTxt"
      @dialogConfirm="handleConfirm" @dialogCancel="handleCancel">
      <el-form class="form-wrap flexMultiWrap" :model="tmpData">
        <template v-if="showDiolagStatus === 0">
          <FormWithLabel label="车牌号">
            <el-input v-model="searchCarData.carPlate" placeholder="请输入车牌号码" :disabled="isdisabled"></el-input>
          </FormWithLabel>
          <button type="button" class="btn-operate btn-style-main mr10 mb20" @click="searchCar(searchCarData.carPlate)">搜索</button>
          <FormWithLabel label="车辆">
            <el-select v-model="cars" placeholder="请选择" @change="getCars()">
              <el-option
                v-for="(item,index) in carArr"
                :key="index"
                :label="item.brand"
                :value="item.plateNumber">
              </el-option>
            </el-select>
          </FormWithLabel>
        </template>
        <template v-if="showDiolagStatus === 1">
          <FormWithLabel label="车辆">
            <el-input v-model="editDialog.plateNumber" placeholder="车辆" :disabled="isdisabled"></el-input>
          </FormWithLabel>
        </template>

        <div class="fs16 bold" style="width: 100%">车辆信息</div>
        <FormWithLabel label="驾校">
          <el-input v-model="editDialog.oldSchool" placeholder="驾校" :disabled="isdisabled"></el-input>
        </FormWithLabel>
        <FormWithLabel label="项目部">
          <el-input v-model="editDialog.oldProject" placeholder="项目部" :disabled="isdisabled"></el-input>
        </FormWithLabel>
        <FormWithLabel label="训练场" is-required>
          <el-input v-model="editDialog.oldDrivingPlace" placeholder="训练场" :disabled="isdisabled"></el-input>
        </FormWithLabel>
        <FormWithLabel label="教练">
          <el-input v-model="editDialog.hname" placeholder="教练" :disabled="isdisabled"></el-input>
        </FormWithLabel>

        <div class="fs16 bold" style="width: 100%">选择新训练场</div>
        <FormWithLabel label="训练场">
          <FormInputWithDialog
            :val="applyInputDiolag.idList"
            :disabled="applyDioDisables"
            :isInnerDialog="true"
            v-bind="applyInputDiolag.innerSelect"
            @update:val="applyHandleInp('id', $event)"
            @update:valText="applyHandleInp('text', $event)"/>
        </FormWithLabel>
      </el-form>

      <FormAuditing
        v-if="showDiolagStatus === 1 && showStatus"
        class="mt10"
        :status.sync="status" :readOnly="isreadOnly"
        :txtRes="txtRes"
        :textareaVal.sync="textareaVal" :textareaTit="textareaTit"/>
      <template slot="bodyAttach" v-if="showDiolagStatus === 1">
        <div class="textCenter mt30 mb30"></div>
      </template>
    </SelfDialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import SelfDialog from '@/components/SelfDialog'
  import FormAuditing from '@/components/FormAuditing'
  import FormInputWithDialog from '@/components/FormInputWithDialog'

  import TableEdit from '@/mixins/TableEdit'
  import PagePart from '@/mixins/PagePart'

  export default {
    name: 'CarsExchangeApply',
    components: {SelfDialog, FormAuditing, FormInputWithDialog},
    mixins: [TableEdit, PagePart],
    data () {
      return {
        tableData: [],
        tmpData: {
          car: '',
          ground: '',
          newGround: '',
          status: ''
        },
        inputDiolag: {
          companysOrPersonals: '', // 文本
          idList: [], // id
          innerSelect: {
            placeholder: '请选择',
            ajaxObj: {
              url: '/api/org/search',
              params: {enable: true}
            }
          }
        },
        newInputDiolag: {
          companysOrPersonals: '', // 文本
          idList: [], // id
          innerSelect: {
            placeholder: '请选择',
            ajaxObj: {
              url: '/api/org/search',
              params: {enable: true}
            }
          }
        },
        applyInputDiolag: {
          companysOrPersonals: '', // 文本
          idList: [], // id
          innerSelect: {
            placeholder: '请选择',
            ajaxObj: {
              url: '/api/org/search',
              params: {enable: true}
            }
          }
        },
        auditStatus: [],
        editDialog: {
          oldSchool: '',
          oldProject: '',
          oldDrivingPlace: '',
          hname: '',
          newDrivingPlace: ''
        },
        searchCarData: [
          {
            carPlate: ''
          }
        ],
        txtRes: ['同意本车辆转场申请', '申请转场审核不通过'],
        status: 'no', //  none ,yes,no
        isreadOnly: true,
        textareaVal: '',
        textareaTit: '请填写退回原因',
        showDiolagStatus: 0,
        isdisabled: true, // 是否不可编辑
        DialogShowTxt: '查看车辆流转申请', //  弹框标题
        isShowDialog: false,
        totalPage: 0,
        carArr: [],
        cars: '',
        applyDioDisables: false,
        showStatus: true,
        hideRow: false
      }
    },
    mounted () {
      this.ajaxGetData()
      this.getStatusInfo()
    },
    methods: {
      ajaxGetData () {
        let postData = {
          ...this.calcPageParams,
          params: {
            plateNumber: this.tmpData['car'], // 车牌号
            oldGroupId: this.inputDiolag.idList, // 训练场
            newGroupId: this.newInputDiolag.idList, // 新训练场Id
            status: this.tmpData['status'] // 审核状态（1待审核，2审核通过，3审核不通过）
          },
          sort: 'string'
        }
        this.$axios.post('/api/jpCarChangePlace/list', postData)
          .then(res => {
            if (res.data.meta.success) {
              this.tableData = res.data.data.data
              this.totalPage = res.data.data.totalSize
            }
          })
      },
      getStatusInfo () {
        this.$axios.get('/api/crmMap/selectByName/jp_car_change_place_status')
          .then(res => {
            if (res.data.meta.success) {
              this.auditStatus = res.data.data
            }
          })
      },
      handleAdd () {
        this.isdisabled = false
        this.DialogShowTxt = '车辆流转申请'
        this.showDiolagStatus = 0
        this.isShowDialog = true
        this.searchCarData.carPlate = ''
        this.carArr = ''
        this.cars = ''
        this.applyDioDisables = false
        this.reserteditDialog()
      },
      handlePreview (id) {
        this.isdisabled = true
        this.showDiolagStatus = 1
        this.DialogShowTxt = '查看车辆流转申请'
        this.applyDioDisables = true
        this.$axios.get('/api/jpCarChangePlace/' + id)
          .then(res => {
            if (res.data.meta.success) {
              this.editDialog = res.data.data
              this.showStatus = true
              if (this.editDialog['status'] === '3') {
                this.status = 'yes'
              } else if (this.editDialog['status'] === '2') {
                this.status = 'no'
                this.textareaVal = this.editDialog['remark']
              } else {
                this.showStatus = false
              }
              this.applyInputDiolag.idList = res.data.data['newGroupId']
              this.isShowDialog = true
            }
          })
      },
      searchCar (plateNumber) {
        let postData = {
          plateNumber: plateNumber
        }
        this.$axios.post('/api/crmCar/selectByPlateNumber', postData)
          .then(res => {
            if (res.data.meta.success) {
              this.carArr = res.data.data
            }
          })
      },
      getCars () {
        // this.editDialog.oldSchool = this.carArr(index)['schoolName']
        for (let i = 0; i < this.carArr.length; i++) {
          if (this.carArr[i]['id'] === this.cars) {
            this.editDialog.oldSchool = this.carArr[i]['schoolName']
            this.editDialog.oldProject = this.carArr[i]['projectName']
            this.editDialog.oldDrivingPlace = this.carArr[i]['drivingPlace']
            this.editDialog.hname = this.carArr[i]['hname']
            this.editDialog.newDrivingPlace = this.carArr[i]['hname']
            return
          }
        }
      },
      handleConfirm () {
        let postData = {
          carId: this.cars,
          newGroupId: this.applyInputDiolag['idList']
        }
        this.$axios.post('/api/jpCarChangePlace/add', postData)
          .then(res => {
            if (res.data.meta.success) {
              this.isShowDialog = false
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.ajaxGetData()
            }
          })
      },
      search () {
        this.ajaxGetData()
      },
      reserteditDialog () {
        for (let value in this.editDialog) {
          this.editDialog[value] = ''
        }
        this.applyInputDiolag['idList'] = []
      },
      resert () {
        for (let value in this.tmpData) {
          this.tmpData[value] = ''
        }
        this.inputDiolag['idList'] = []
        this.newInputDiolag['idList'] = []
      },
      handleInp (type, newVal) {
        if (type === 'text') {
          this.$set(this.inputDiolag, 'companysOrPersonals', newVal)
        } else if (type === 'id') {
          this.$set(this.inputDiolag, 'idList', newVal)
        }
      },
      newHandleInp (type, newVal) {
        if (type === 'text') {
          this.$set(this.newInputDiolag, 'companysOrPersonals', newVal)
        } else if (type === 'id') {
          this.$set(this.newInputDiolag, 'idList', newVal)
        }
      },
      applyHandleInp (type, newVal) {
        if (type === 'text') {
          this.$set(this.applyInputDiolag, 'companysOrPersonals', newVal)
        } else if (type === 'id') {
          this.$set(this.applyInputDiolag, 'idList', newVal)
        }
      },
      handleCancel () {
        this.isShowDialog = false
      }
    }
  }
</script>
<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
  .CarsExchangeApply {
  }
</style>
